const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var VueLoaderPlugin = require("vue-loader/lib/plugin.js");
module.exports = {
    // mode: "development", // 指定开发模式  development-开发 production-生产
    mode: "production", // 指定开发模式  development-开发 production-生产
    
    entry: "./src/main.js",//入口
    output: {
        filename: 'index.js',
        path: path.join(__dirname, 'dist')
    },
    // devtool: 'source-map',
    module: {
        rules: [
            //打包css文件
            {
                test: /\.css$/i,
                use: ["style-loader", {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        esModule: false
                    }
                }, "css-loader"],
            },
            //打包less文件
            {
                test: /\.less$/i,
                use: [
                    'style-loader',
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false
                        }
                    },
                    'css-loader',"postcss-loader", 'less-loader'
                ],
            },
             //scss 编译
             {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        esModule: false
                    }
                }, 'css-loader', 'postcss-loader', 'sass-loader'],

            },
            // ES6语法 编译
            // {
            //     test: /\.js$/,
            //     // exclude：排除指定目录不需要模板打包处理
            //     exclude: /(node_modules|bower_components)/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: ['@babel/preset-env',"@babel/preset-react"]
            //         }
            //     }
            // },
            {
                test: /\.js$/,
                // exclude：排除指定目录不需要打包处理
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            {
                test: /\.vue$/, use: 'vue-loader'
            }
        ]
    },
    // 服务器热更新
    devServer: {
        hot: true,//开启热替换
        static: {
            directory: path.join(__dirname, 'dist'),
        },
        //压缩
        compress: true,
        //端口
        port: 9000,
        //自动打开服务器
        open: true,
    },
    // 插件生成HTML5 文件
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html'  //src/目录下的index.html模板打包
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            // 防止客户端缓存
            filename: "[name]-[hash:8].css",
        })
    ],
    resolve: {
        alias: {
            // 修正vue导的入路径，导入完整的Vue框架
            'vue$': "vue/dist/vue.js",
            '@': path.join(__dirname, 'src'),
            //配置api目录
            '@api': path.join(__dirname, 'src/api'),
            //配置util目录
            '@util': path.join(__dirname, 'src/util'),
        },
        extensions: ['.js', '.vue', '.json']
    },

}
